<header id="navbar" class="fixed top-0 left-0 w-full bg-white/95 backdrop-blur-sm z-50 py-4 transition-all duration-300">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center">
      <!-- Logo -->
      <a href="#" class="flex items-center space-x-2">
        <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
          <span class="text-white font-bold text-xl"><?php echo $data['content']['logo']['text']; ?></span>
        </div>
        <span class="text-xl font-bold text-dark"><?php echo $data['content']['logo']['fullName']; ?></span>
      </a>
      
      <!-- Desktop Menu -->
      <nav class="hidden md:flex items-center space-x-8">
        <?php foreach($data['content']['navItems'] as $item){ ?>
        <a href="<?php echo $item['href']; ?>" class="text-dark/70 hover:text-primary transition-custom"><?php echo $item['name']; ?></a>
        <?php } ?>
        <a href="<?php echo $data['content']['ctaButton']['href']; ?>" class="px-5 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom"><?php echo $data['content']['ctaButton']['text']; ?></a>
      </nav>
      
      <!-- Mobile Menu Button -->
      <button id="menuBtn" class="md:hidden text-dark hover:text-primary transition-custom">
        <i class="fa fa-bars text-2xl"></i>
      </button>
    </div>
    
    <!-- Mobile Menu -->
    <div id="mobileMenu" class="hidden md:hidden mt-4 py-4 border-t border-gray-100">
      <nav class="flex flex-col space-y-4">
        <?php foreach($data['content']['navItems'] as $item){ ?>
        <a href="<?php echo $item['href']; ?>" class="text-dark/70 hover:text-primary transition-custom"><?php echo $item['name']; ?></a>
        <?php } ?>
        <a href="<?php echo $data['content']['ctaButton']['href']; ?>" class="px-5 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom text-center"><?php echo $data['content']['ctaButton']['text']; ?></a>
      </nav>
    </div>
  </div>
</header>